<template>
  <div class="container">
    <div class="main">
      <div v-for="(opt, i) in opts" :class="`box box${i}`" @click="handleClick(opt.url)">{{ opt.text }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { ElMessageBox } from "element-plus";
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "IndexPage",
  setup() {
    const router = useRouter();

    const opts = [
      { text: "全部", url: "/main/id1" },
      { text: "搜索", url: "/search" },
      { text: "ChatGPT", url: "/chat" },
      { text: "探索", url: "/water" },
      { text: "复活", url: "/resurrection" },
      { text: "咒语", url: "/abracadabra" },
      { text: "上传", url: "/upload" },
      { text: "审核", url: "/check" },
      { text: "留言板", url: "/board" },
    ];

    const warn = new Map([
      ["/resurrection", "请注意，这里的图片是隐藏的，可能会使人产生恶心、头晕等不适症状，亦有可能对情绪产生负面影响。如果执意观看，请自行承受观看后的后果，若有任何不适症状，请立即停止观看并及时向医师寻求帮助。"],
      ["/check", "我们需要你！进入审核页面，把你认为AI画得好的图图加入到展示页面吧！"],
      ["/abracadabra", "上传模板功能还没做，摆了"],
      ["/main2", "本页面用于测试分页功能"]
    ])

    const handleClick = (url: string) => {
      // 弹窗询问用户是否进入，如果确认就跳转，取消就返回
      if (warn.has(url)) {
        ElMessageBox({
          message: warn.get(url),
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose(action: string, instance: any, done: any) {
            if (action === "confirm") {
              router.push(url);
              done();
            } else {
              done();
            }
          }
        }).catch(() => {
        });
      } else {
        router.push(url);
      }
    };

    return { opts, handleClick };
  }
});
</script>

<style lang="less" scoped>
.box {
  //margin: 5px;
  color: #dfe4ea;
  font-size: min(7vw, 10vh);
  text-align: center;
  line-height: 30vh;
}

.main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  //height: 80vh;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.box0 {
  //全部
  grid-column: 1/3;
  grid-row: 1/2;
  background: #eccc68;
}

.box1 {
  //搜索
  grid-column: 3/5;
  grid-row: 1/2;
  background: #ff7f50;
}

.box2 {
  //ChatGPT
  grid-column: 1/3;
  grid-row: 2/3;
  background: #6ab04c;
}

.box3 {
  //探索
  grid-column: 3/5;
  grid-row: 2/3;
  background: #0984e3;
}

.box4 {
  // 复活
  grid-column: 5/6;
  grid-row: 2/3;
  background: #a29bfe;
}


.box5 {
  //咒语
  grid-column: 5/6;
  grid-row: 3/4;
  background: #d6a2e8;
}

.box6 {
  //上传
  grid-column: 5/6;
  grid-row: 1/2;
  background: #74b9ff;
}

.box7 {
  //审核
  grid-column: 3/5;
  grid-row: 3/4;
  background: #f8a5c2;
}

.box8 {
  //留言板
  grid-column: 1/3;
  grid-row: 3/4;
  background: #f3a683;
}

@media screen and (max-width: 1000px) {
  .box {
    color: #dfe4ea;
    font-size: 8vw;
    text-align: center;
    line-height: 30vw;
  }

  .box:hover {
    border: 5px solid rgba(241, 242, 246, 0.8);
    /*width: 1.01 rem;*/
    transition: 0.3s linear;
    cursor: pointer;
  }

  .main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 95vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 10px;
  }

  .box0 {
    //全部
    grid-column: 1/3;
    grid-row: 1/2;
    background: #eccc68;
  }

  .box1 {
    //搜索
    grid-column: 1/2;
    grid-row: 2/3;
    background: #ff7f50;
  }

  .box2 {
    //ChatGPT
    grid-column: 1/2;
    grid-row: 3/4;
    background: #6ab04c;
  }

  .box3 {
    //探索
    grid-column: 2/3;
    grid-row: 2/3;
    background: #a29bfe;
  }

  .box4 {
    //复活
    grid-column: 2/3;
    grid-row: 4/5;
    background: #636e72;
  }

  .box5 {
    //咒语
    grid-column: 2/3;
    grid-row: 3/4;
    background: #bdc581;
  }

  .box6 {
    //上传
    display: none;
  }

  .box7 {
    //审核
    grid-column: 1/2;
    grid-row: 4/5;
    background: #fc5c65;
  }

  .box8 {
    //留言板
    grid-column: 1/3;
    grid-row: 5/6;
    background: #22a6b3;
  }
}

//.container {
//  // ！！！改为彩色时，请将 .main 的 transform 为 translate(-50%, -50%);！！！
//  filter: grayscale(100%);
//}
</style>
